<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>components</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="root">
    <my-header 
      :title="title" 
      url="http://www.baidu.com"
      @on-message="handleMessage"
    ></my-header>
    <my-footer :message="message">
      <div slot="div1">haha</div>
      <div slot="div2">heihei</div>
    </my-footer>
    <!-- <div onmessage="abc">hi siri</div> -->

    <component :is="componentId" message="abc"></component>
  
    <table border="1">
      <tr is="my-tr"></tr>
    </table>
  </div>
  <script>
    // camelCase
    // ParscalCase
    // kebab-case
    Vue.component('my-tr', {
      template: `
        <tr>
          <td>aaa</td>
          <td>bbb</td>
        </tr>
      `
    })

    Vue.component('my-header', {
      props: ['title', 'url'],
      template: `
        <div>
          <div>{{title}} - {{url}}</div>
          <div>hello</div>
        </div>
      `,
      data() {
        return {
          header: ''
        }
      },
      updated() {
        // console.log('updated')
      },
      mounted() {
        // this.title = 'abc'
        this.$emit('on-message', 'mima')
      },
    })

    Vue.component('my-footer', {
      props: ['message'],
      template: `
        <div>
          <div>{{message}}</div>
          <slot name="div1"></slot>
          <div>hello</div>
        </div>
      `
    })


    Vue.config.productionTip = false
    var vm = new Vue({
      el: '#root',
      data: {
        title: 'my header !!!',
        message: '',
        componentId: 'my-footer'
      },
      created() {
        console.log(document.querySelector('#root'))
      },
      mounted() {
        setTimeout(() => {
          this.title = 'def'
        }, 1000)
      },
      methods: {
        handleMessage(message) {
          this.message = message
        }
      },
    })
  </script>
</body>
</html>